<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>更换头像</span>
    </div>
    <div>
      <!-- 图片预览区域 -->
       <img v-if="avatar" class="the_img" :src="avatar" alt="" />
       <img v-else class="the_img" src="../../assets/images/avatar.jpg" alt="" />
       <!-- 按钮区域 -->
        <div class="btn-box">  
          <input type="file" accept="image/*" style="display:none" ref="iptRef" @change="onFileChange" />
          <el-button type="primary" icon="el-icon-plus" @click="chooseImg">选择图片</el-button>
          <el-button type="success" icon="el-icon-upload" :disabled="avatar===''" @click='uploadFn'>上传头像</el-button>
        </div>
    </div>
  </el-card>
</template>
<script> 
import {updateUserAvatarAPI} from '@/api'
export default{
  name:'userAvatar',
  data(){
    return{
      avatar:'',
    }
  },
  methods:{
    // 选择图片的事件方法
    chooseImg(){
      // 目的：为了让input[type=file]标签，让他在用js代码来触发它的点击事件
      // 导致它默认行为给一个文件选择窗口
      // 为什么这样用呢：因为input[type=file]标签，它是原生标签，样式不太好改。
      this.$refs.iptRef.click()
    },
    onFileChange(e){   //e是原生的事件对象
      // 拿到用户选择的文件数组
      let files=e.target.files
      if(files.length===0){
        // 说明没有选择文件

      }else{
        // 默认选择了一个文件，如果选择多个需要给input标签加上额外的原生属性multiple
        console.log(files[0])
        // 目标：选择的图片文件，要给到img标签上做纯前端的预览
        // img标签的src值只能是图片的链接地址（外链接http://开头，图片文件相对路径）
        // 或者是图片的base64字符串（而且字符串必须是data:image/png;base64开头，图片转base64字符串）
        // 解决：
        // 1、内存临时地址：将文件地址转换为base64字符串：这个地址只能在js内存中，不能发给后台
        // 语法：URL.createObjectURL(文件)  它的返回值就是内存里的临时地址
        // this.avatar=URL.createObjectURL(files[0])

        // 2、将文件转换为base64字符串，此字符串时可以发个后台的
        // 语法：见下：
        // （1）创建一个FileReader对象
        const fr=new FileReader()
        // （2）调用readAsDataURL函数，读取文件内容
        fr.readAsDataURL(files[0])
        // （3）监听fr的onload事件
        fr.onload=e=>{   //onload等待把文件读成base64字符串后触发onload事件函数
          // (4)通过e.taerget.result获取base64字符串 
          this.avatar=e.target.result
        }
      }
    },
    // 上传图片事件
    uploadFn() { 
      updateUserAvatarAPI(this.avatar).then((res)=>{
        console.log(res)
        if(res.data.code===0){
          this.$message.success(res.data.message)
          // 更新vuex中的用户信息
          this.$store.dispatch('getUserInfoActions')
        }else{
          this.$message.error(res.data.message)
        }
      })
    },
  }
}
</script>
<style scoped>
  .btn-box{
    margin-top: 10px;
  }
  .preview{
    object-fit: cover;
  }
  .the_img{
    width: 350px;
    height: 350px;
  }
</style>